<template>
  <div>
    <el-card
      class="card"
      shadow="hover"
      style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px"
    >
      <template #header>
        <h2 class="title">管理信息反馈</h2>
      </template>
      <a-list size="small" bordered :data-source="plain">
        <el-table :data="plain" class="mid">
          <el-table-column prop="query" label="详情" type="expand" width="100">
            <template #default="props">
              <el-card shadow="hover" class="list-container">
                <el-table :data="props.row.query" width="100">
                  <el-table-column prop="word" label="词语"/>
                  <el-table-column prop="rating" label="评分"/>
                  <el-table-column prop="comment" label="评论"/>
                </el-table>
              </el-card>
            </template>
          </el-table-column>
          <el-table-column prop="username" label="用户名"/>
          <el-table-column prop="timestamp" label="时间"/>
          <el-table-column label="操作">
            <el-button type="danger">删除</el-button>
          </el-table-column>
        </el-table>
        <template #header>
          <div></div>
        </template>
        <template #footer>
          <div></div>
        </template>
      </a-list>
    </el-card>
  </div>

</template>

<script lang="ts" setup>
import { ref, onMounted, toRaw } from "vue";
import { getFeedBacks } from '@/api/feedbacks';

const records = ref();
const list = ref();
const plain = ref();

const onGetFeedbacks = () => {
  getFeedBacks().then((res) => {
    // records.value = res.data.hasOwnProperty("records")
    //   ? res.data.new_words
    //   : [];
    records.value = res.data;
    plain.value = toRaw(toRaw(records).value);
    console.log(plain.value);
  });
};

onMounted(() => {
  onGetFeedbacks();
});
</script>

<style scoped lang="scss">
.list-container{
  margin: 2% auto;
  width:80%;
}
</style>
